<template>
  <div class="loading-demo">
    <div class="demo-header">
      <h1>🌸 二次元加载组件演示</h1>
      <p>基于ECharts风格的露营主题加载动画</p>
    </div>

    <div class="demo-grid">
      <!-- 基础加载 -->
      <div class="demo-card">
        <h3>📦 基础加载</h3>
        <p>简单的加载提示，3秒后自动关闭</p>
        <button @click="showBasicLoading" class="demo-btn">
          显示基础加载
        </button>
      </div>

      <!-- 带进度条 -->
      <div class="demo-card">
        <h3>📊 进度条加载</h3>
        <p>显示带进度的加载界面</p>
        <button @click="showProgressLoading" class="demo-btn">
          显示进度加载
        </button>
      </div>

      <!-- 模拟进度 -->
      <div class="demo-card">
        <h3>🚀 模拟进度</h3>
        <p>自动模拟加载进度，动态更新提示</p>
        <button @click="simulateProgress" class="demo-btn">
          模拟进度加载
        </button>
      </div>

      <!-- 文件上传模拟 -->
      <div class="demo-card">
        <h3>📤 文件上传</h3>
        <p>模拟文件上传过程</p>
        <button @click="simulateUpload" class="demo-btn">
          模拟文件上传
        </button>
      </div>

      <!-- 多步骤加载 -->
      <div class="demo-card">
        <h3>🔄 多步骤加载</h3>
        <p>模拟多个步骤的加载流程</p>
        <button @click="multiStepLoading" class="demo-btn">
          多步骤加载
        </button>
      </div>

      <!-- 自定义文字 -->
      <div class="demo-card">
        <h3>✏️ 自定义文字</h3>
        <p>使用自定义标题和提示</p>
        <button @click="customTextLoading" class="demo-btn">
          自定义加载
        </button>
      </div>
    </div>

    <div class="demo-code">
      <h2>💻 代码示例</h2>
      <pre><code>{{ codeExample }}</code></pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { loadingService } from '@/services/loadingService'

// 1. 基础加载
const showBasicLoading = () => {
  loadingService.show({
    title: 'DevOps自动化运维系统',
    tip: '加载中，请稍候...'
  })

  setTimeout(() => {
    loadingService.hide()
  }, 3000)
}

// 2. 进度条加载
const showProgressLoading = async () => {
  loadingService.showWithProgress({
    title: '数据处理中',
    tip: '正在处理数据...'
  })

  // 模拟进度更新
  for (let i = 0; i <= 100; i += 10) {
    await new Promise(resolve => setTimeout(resolve, 200))
    loadingService.setProgress(i)
    
    if (i < 50) {
      loadingService.setTip('正在初始化...')
    } else if (i < 90) {
      loadingService.setTip('正在处理数据...')
    } else {
      loadingService.setTip('即将完成...')
    }
  }

  setTimeout(() => {
    loadingService.hide()
  }, 500)
}

// 3. 模拟进度
const simulateProgress = async () => {
  await loadingService.simulateProgress(3000, () => {
    console.log('加载完成！')
  })
}

// 4. 文件上传模拟
const simulateUpload = async () => {
  loadingService.showWithProgress({
    title: '文件上传中',
    tip: '正在准备上传...'
  })

  for (let i = 0; i <= 100; i += 5) {
    await new Promise(resolve => setTimeout(resolve, 100))
    loadingService.setProgress(i)
    
    if (i < 30) {
      loadingService.setTip('正在上传文件...')
    } else if (i < 60) {
      loadingService.setTip('上传进行中...')
    } else if (i < 90) {
      loadingService.setTip('即将完成...')
    } else {
      loadingService.setTip('上传成功！')
    }
  }

  setTimeout(() => {
    loadingService.hide()
  }, 500)
}

// 5. 多步骤加载
const multiStepLoading = async () => {
  loadingService.showWithProgress({
    title: '系统初始化'
  })

  const steps = [
    { progress: 20, tip: '正在连接服务器...', delay: 500 },
    { progress: 40, tip: '正在验证身份...', delay: 500 },
    { progress: 60, tip: '正在加载配置...', delay: 500 },
    { progress: 80, tip: '正在加载资源...', delay: 500 },
    { progress: 100, tip: '初始化完成！', delay: 300 }
  ]

  for (const step of steps) {
    await new Promise(resolve => setTimeout(resolve, step.delay))
    loadingService.setProgress(step.progress)
    loadingService.setTip(step.tip)
  }

  setTimeout(() => {
    loadingService.hide()
  }, 500)
}

// 6. 自定义文字
const customTextLoading = () => {
  loadingService.show({
    title: '🎮 正在进入游戏世界',
    tip: '准备好开始冒险了吗？'
  })

  setTimeout(() => {
    loadingService.setTip('正在加载场景...')
  }, 1000)

  setTimeout(() => {
    loadingService.setTip('正在加载角色...')
  }, 2000)

  setTimeout(() => {
    loadingService.setTip('欢迎回来！')
    setTimeout(() => loadingService.hide(), 500)
  }, 3000)
}

// 代码示例
const codeExample = ref(`// 基础用法
import { loadingService } from '@/services/loadingService'

// 显示加载
loadingService.show({
  title: 'DevOps自动化运维系统',
  tip: '加载中，请稍候...'
})

// 隐藏加载
loadingService.hide()

// 带进度条
loadingService.showWithProgress({
  title: '文件上传中',
  tip: '正在上传...'
})

// 更新进度
loadingService.setProgress(50)

// 模拟自动进度
await loadingService.simulateProgress(3000)`)
</script>

<style scoped>
.loading-demo {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
}

.demo-header {
  text-align: center;
  margin-bottom: 50px;
  padding: 30px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.demo-header h1 {
  font-size: 36px;
  color: #667eea;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.demo-header p {
  font-size: 18px;
  color: #666;
  margin: 0;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.demo-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.demo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.demo-card h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.demo-card p {
  color: #666;
  font-size: 14px;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.demo-btn {
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}

.demo-btn:active {
  transform: translateY(0);
}

.demo-code {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.demo-code h2 {
  font-size: 24px;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: 600;
}

.demo-code pre {
  background: #2d3748;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0;
}

.demo-code code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .loading-demo {
    padding: 20px;
  }

  .demo-header h1 {
    font-size: 28px;
  }

  .demo-grid {
    grid-template-columns: 1fr;
  }
}
</style>
